<template>
    <div class="box">
        <div class="loader">
            <span style="--i:1"></span>
            <span style="--i:2"></span>
            <span style="--i:3"></span>
            <span style="--i:4"></span>
            <span style="--i:5"></span>
            <span style="--i:6"></span>
            <span style="--i:7"></span>
            <svg>
                <filter id='gooey'>
                    <feGaussianBlur in='SourceGraphic' stdDeviation='1'></feGaussianBlur>
                    <feColorMatrix values="
                    1 0 0 0
                    0 1 0 0
                    0 0 1 0
                    0 0 20 -10"></feColorMatrix>
                </filter>
            </svg>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
.box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* background: black; */
}
.loader{
    position: relative;
    width: 100px;
    height:100px;
    filter:url(#gooey)
}
.loader span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    animation: animate 4s ease-in-out infinite;
    animation-delay: calc(0.2s * var(--i));
}
.loader span::before{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: calc(50% - 10px);
    border-radius: 50%;
    background: linear-gradient(#fce4ec,#03a9f4);
}
@keyframes animate {
    0%{
        transform: rotate(0deg);
    }
    50%,100%{
        transform: rotate(360deg);
    }
}
</style>